import React,{Component} from 'react'

//props
//特别提醒，在React中props的应用场景远远超过了state
//什么是props?props是父子组件之间通信纽带，你可以理解props是相当于人类的基因
//使用props可以向子代组件传递JS所有数据类型字符串、布尔值、数字。数组。对象、null、undefined，还可以传自定义事件
//props还可以向子组件传递“自定义事件”，但是这些自定义事件必须以on卡头，例如‘onRun’
//props还可以向子组件传递jsx元素(React元素)
//props还可以实现类似Vue中的插槽的特性，具体的做法是直接在自定义组件中嵌套jsx元素，在自定义组件中使用props.children来接收。(这也是React组件化的基础)

//props,还是React路由、react状态管理的基础，也就是以后路由信息，状态管理信息数据都是通过props进入到组件内部.


//props不能修改！

//函数式组件啥都没有，只有一个非常非常重要的props
//props里面拥有一切来自父组件的信息
const Child=props=>{
    let {
        onRun,//传自定义事件
        title,//传js基本数据类型
        header,//传jsx元素
        children,//插槽的特性
    }=props
    return(
        <div style={styles.child}>
            {header}
            <h1>{title}</h1>
            {   
                // 判断是否存在这个方法，存在在显示这个按钮，这样就不会出现报错啦
                onRun&&<button onClick={()=>onRun()}>点击</button>
            }
            {children}
        </div>
    )
}

export default class TestPrps extends Component{
    run(){
        console.log('running!');
    }
    render(){
        return(
            <div style={styles.parent}>
                <h1>我是TestProps父组件</h1>
                <Child 
                    title='我是老大'
                    onRun={()=>this.run()}
                />
                <Child 
                    title='我是老二'
                    header={<h1>我是header</h1>}
                />
                <Child title='我是老三'>
                    <div>
                        <span>我超强!</span>
                    </div>
                </Child>
            </div>
        )
    }
}

const styles={
    parent:{
        paddomg:'20px',
        border:'1px solid #ccc',

    },
    child:{
        paddomg: '10px',
        border: '1px solid orange',
    }
}